<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="400px" style="border:1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">

	function createStart(context){
		//var canvas = document.getElementById("mycanvas");
		//var context = canvas.getContext("2d");
		var dx = 100;
		var dy = 50;
		var s = 50;
		context.beginPath();/*加阴影的话加*/
		context.fillStyle="rgba(255,0,0,0.5)";
		var dig = Math.PI/5*4;
		for (var i = 0; i < 5; i++) {
			var x = Math.sin(i*dig);
			var y = Math.cos(i*dig);
			context.lineTo(dx+x*s,dy+y*s)

		}

		context.closePath();
	}

	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	context.shadowBlur = 10;
	context.shadowOffsetX = 20;
	context.shadowOffsetY = 10;
	context.shadowColor = "black"
	for (var i = 0; i < 3; i++) {
		context.translate(100,100);
		createStart(context);
		context.fill()
	}
	
</script>